import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import { Button } from "../Button";
import { ButtonGroup } from "../ButtonGroup";
import { Tooltip, TooltipTrigger, TooltipContent } from "./";

<Meta
  title="Design-system/widgets/Tooltip"
  component={Tooltip}
  args={{
    open: undefined,
    onOpenChange: undefined,
  }}
/>

export const Template = (args) => {
  return (
    <Tooltip {...args}>
      <TooltipTrigger>
        <Button>My trigger</Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
  );
};

# Tooltip

A tooltip is a small pop-up that appears when a user places their cursor over an element such as a link or button. Tooltips can be used to provide users with additional information about an element without having to clutter up the UI with additional text.

<Canvas>
  <Story name="Tooltip">{Template.bind({})}</Story>
</Canvas>

# Placement

The placement of the tooltip can be changed by passing the `placement` prop.

<Canvas>
  <Story name="Tooltip placement">
    <ButtonGroup>
      <Tooltip placement="left">
        <TooltipTrigger>
          <Button variant="secondary">Left</Button>
        </TooltipTrigger>
        <TooltipContent>My tooltip</TooltipContent>
      </Tooltip>
      <Tooltip placement="top">
        <TooltipTrigger>
          <Button variant="secondary">Top</Button>
        </TooltipTrigger>
        <TooltipContent>My tooltip</TooltipContent>
      </Tooltip>
      <Tooltip placement="bottom">
        <TooltipTrigger>
          <Button variant="secondary">Bottom</Button>
        </TooltipTrigger>
        <TooltipContent>My tooltip</TooltipContent>
      </Tooltip>
      <Tooltip placement="right">
        <TooltipTrigger>
          <Button variant="secondary">Right</Button>
        </TooltipTrigger>
        <TooltipContent>My tooltip</TooltipContent>
      </Tooltip>
    </ButtonGroup>
  </Story>
</Canvas>

# Disabled

If the trigger is disabled, the tooltip will not be displayed.

<Canvas>
  <Story name="Tooltip disabled">
    <Tooltip>
      <TooltipTrigger>
        <Button
          isDisabled
          onKeyUp={() => alert("keyup")}
          onPressStart={() => alert("press start")}
          onPress={() => alert("hello")}
        >
          My trigger
        </Button>
      </TooltipTrigger>
      <TooltipContent>My tooltip</TooltipContent>
    </Tooltip>
  </Story>
</Canvas>
